import { useBoolean } from 'ahooks';
import { Button, Divider, Row, Spin, Descriptions } from 'antd';
import React, { useEffect, useState } from 'react';
import request from '@/utils/request';
import VersionManager from './VersionManager';

const { Item } = Descriptions;

export const DataSourceMap = {
  None: '无数据源',
  Http: 'HTTP数据源',
};

function ProcessDetail({ processId, goBack }) {
  const [processInfo, setProcessInfo] = useState({});
  const [loading, { setFalse: stopLoading }] = useBoolean(true);

  useEffect(() => {
    request
      .get(`/process/getProcess?processId=${processId}`)
      .then(data => setProcessInfo(data))
      .finally(() => stopLoading());
  }, [processId, stopLoading]);

  const { processName, processCode, dataSourceType } = processInfo;

  return (
    <div>
      <>
        <Row className="margin-bottom" type="flex" justify="space-between" align="middle">
          <div className="ant-detail-title" style={{ marginBottom: 0 }}>
            基本信息
          </div>
          {goBack && (
            <Button type="primary" onClick={goBack}>
              返回
            </Button>
          )}
        </Row>

        <Spin spinning={loading}>
          <Descriptions column={4}>
            <Item label="流程名称">{processName}</Item>
            <Item label="流程编码">{processCode}</Item>
            <Item label="数据源类型">{DataSourceMap[dataSourceType]}</Item>
          </Descriptions>
        </Spin>
      </>
      <Divider type="horizontal" />
      <VersionManager data={processInfo} />
    </div>
  );
}

export default ProcessDetail;
